<template>
  <div>
    <header class="admin-title">管理员信息</header>
    <div class="admin-content">
      <ul>
        <li>
          <span>姓名:</span><span>{{ adminInfo.user_name }}</span>
        </li>
        <li>
          <span>注册时间:</span><span>{{ adminInfo.create_time }}</span>
        </li>
        <li>
          <span>管理员权限:</span><span>{{ adminInfo.admin }}</span>
        </li>
        <li>
          <span>管理员ID:</span><span>{{ adminInfo.id }}</span>
        </li>
        <li>
          <span>更换头像:</span>
          <el-upload class="avatar-uploader" :action="baseURL + '/admin/update/avatar/' + adminInfo.id" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="adminInfo.avatar" :src="baseImgPath + adminInfo.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { baseURL, baseImgPath } from '../api/env'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      baseURL,
      baseImgPath
    }
  },
  computed: {
    ...mapState(['adminInfo'])
  },
  methods: {
    handleAvatarSuccess(file) {
      if (file.status === 1) {
        this.adminInfo.avatar = file.image_path
        console.log(file)
      } else {
        this.$message.error('上传图片失败')
      }
    },
    beforeAvatarUpload(file) {
      console.log(file)
      const isRightsType = file.type === 'image/jpeg' || file.type === 'image/png'
      const isSize2M = file.size / 1024 / 1024 < 2
      if (!isRightsType) {
        this.$message.error('上传头像图片必须是JPG格式!')
      }
      if (!isSize2M) {
        this.$message.error('上传头像图片大小不能超过2MB！')
      }
      return isRightsType && isSize2M
    }
  }
}
</script>
<style lang="less">
.admin-title {
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-size: 28px;
}
.admin-content {
  width: 500px;
  height: 500px;
  border-radius: 14px;
  background-color: #f9fafc;
  margin: 0 auto;
  padding: 20px;
  li {
    width: 100%;
    height: 60px;
    line-height: 60px;
    span {
      color: #666666;
      margin-right: 10px;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
